<template>
  <div class="dashboard-item" v-for="(item, index) in items" :key="index">
    <div class="content"   >
      <div class="img"  :class="`img-${sanitizeClassName(item.iconName)}`">
        <img :src="item.icon" :alt="item.title" class="icon"/>
      </div>
      <div class="content-rot">
        <h3>{{ item.title }}</h3>
        <p>{{ item.value }}人</p>
      </div>
    </div>
  </div>

</template>

<script setup>
import { defineProps, computed } from 'vue';

const props = defineProps({
  items: Array
});

// 定义一个方法来获取图片的URL
function getImgUrl(iconName) {
  return new URL(`@/assets/images/img/${iconName}.png`, import.meta.url).href;
}

// 清理类名的方法
function sanitizeClassName(name) {
  return name
}
</script>




<style scoped>


.dashboard-item {
  display: flex;
  align-items: center;

  /*border: 1px solid red;*/
  border-radius: 5px;
  background-color: #fff;
}

.icon {
  width: 50px;
  height: 50px;
  object-fit: contain; /* 确保图标按比例缩放 */
  color: #fff;
}
.img {
  margin: 10px;
  padding: 10px;
  background-color: #0DA929;
  margin-right: 20px;
  display: flex;
  justify-content: center;
  box-shadow: 0 0 15px rgba(10, 164, 38, 0.8); /* 悬停时发光 */
}
.content {
  width: 300px;
  display: flex;
  align-items: center;
  flex: 1;
  /*border: #1c84c6 1px solid;*/
  /*margin-right: 30px;*/
}
.content-rot{
  display: flex;
  flex-direction: column;
  /*border: red 1px solid;*/
}



/* 动态类名样式 */
.img-oldman {
  background-color: #0DA929;
  box-shadow: 0 0 15px rgba(10, 164, 38, 0.8);
}

.img-gaoxue {
  background-color: #D30101;
  box-shadow: 0 0 15px rgba(236, 35, 35, 0.8);
}

.img-tangniao {
  background-color: #E58B13;
  box-shadow: 0 0 15px rgba(224, 132, 12, 0.8);
}

.img-jingshen {
  background-color: #A81DB2;
  box-shadow: 0 0 15px rgba(188, 61, 197, 0.8);
}

.img-feijiehe {
  background-color: #26A6C6;
  box-shadow: 0 0 15px rgba(54, 191, 226, 0.8);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dashboard-item {
    flex: 1 1 calc(50% - 20px); /* 在小屏幕上每行两个项目 */
  }
}

@media (max-width: 576px) {
  .dashboard-item {
    flex: 1 1 100%; /* 在更小的屏幕上每行一个项目 */
  }
}
</style>
